<template>
  <div class="max">
    <my-header :backBtn="true">
      <div slot="title">
        菜色详情
      </div>
    </my-header>
    <div class="cont-nof oh" style="background: #FFFFFF;">
      <div class="add_play_2 oh">
        <img @click="previewImage(food.imageList[0])" :src="food.imageList[0].url" alt="" width="100%">
        <div>{{food.name}}</div>
      </div>
      <div class="add_plan_btn_2 flex" v-if="access!=='kinsfolk'">
        <div @click="deleteFn"><img src="../../../static/img/delect.png" alt="">删除</div>
        <div @click="edit"><img src="../../../static/img/bianji.png" alt="">编辑</div>
      </div>
    </div>

  </div>

</template>
<script>
  import wx from "weixin-js-sdk";

  export default {
    data() {
      return {
        access: this.$Cookies.get('loginType'),
        data: {
          food: {
            name: '',
            imageList: []
          },
        }
      }
    },
    methods: {
      previewImage(url) {
        wx.previewImage({
          previewImage: url,
          urls: [url]
        })
      },
      deleteFn() {
        this.$http.deleteFood({
          id: this.food.id
        }).then(resp => {
          history.back(0);
        })
      },
      edit() {
        this.$router.push({
          path: '/addDishes',
          query: {
            type: 'edit',
            data: this.food
          }
        })
      }
    },
    created() {
      this.food = JSON.parse(this.$route.query.data);
    }
  }
</script>


<style scoped>
  .add_play_2 {
    height: calc(100% - 6rem);
    width: calc(100% - 2rem);
    margin: 1rem auto 0;
    font-size: 1.6rem;
    line-height: 3rem;
  }

  .add_plan_btn_2 {
    height: 5rem;
    border-top: 1px solid rgba(238, 238, 238, 1);
    box-sizing: border-box;
  }

  .add_plan_btn_2 > div {
    line-height: 5rem;
    width: 50%;
    height: 100%;
    font-size: 1.4rem;
    color: rgba(132, 132, 132, 1);
    border-right: 1px solid rgba(238, 238, 238, 1);
    box-sizing: border-box;
  }

  .add_plan_btn_2 > div img {
    width: 1.6rem;
    margin-top: -0.2rem;
    margin-right: 1rem;
    vertical-align: middle;
  }

  .add_plan_btn_2 > div:last-child {
    border-right: 0;
  }
</style>
